<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前后端交互</title>
    <script src="./lib/jquery.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            margin: 0 auto;
            width: 1000px;
        }

        header {
            border-bottom: 1px solid #333;
        }

        h1 {
            text-align: center;
            line-height: 60px;
        }

        .leftfix {
            float: left;
        }

        .rightfix {
            float: right;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        #main {
            margin-top: 10px;
        }

        form {
            padding-bottom: 10px;
            border-bottom: 2px solid #333;
        }

        form dl {
            margin: 10px auto;
        }

        form dl::after {
            content: "";
            display: block;
            clear: both;
        }

        form dl dt {
            float: left;
            width: 120px;
            text-align: left;
        }

        form dl dd {
            float: right;
            width: 870px;
            text-align: left;
        }

        ul {
            margin-top: 50px;
        }

        ul li {
            border-bottom: 1px dashed grey;
            padding: 10px 0;
        }

        ul li:last-child {
            border-bottom: none
        }

        ul li::after {
            content: "";
            display: block;
            clear: both;
        }

        ul li cite,
        ul li em,
        ul li b,
        ul li i,
        ul li time,
        ul li u {
            display: block;
            float: left;
            margin-right: 5px;
            width: 160px;
        }

        ul li cite {}

        ul li em {}

        ul li b {}

        ul li i {}

        ul li time {}

        ul li u {}
    </style>
</head>

<body>
    <header>
        <h1 class="wrap">前后段交互演示</h1>
    </header>
    <div id="main" class="wrap">
        <form>
            <dl>
                <dt><label for="name">姓名</label></dt>
                <dd><input type="text" name="name" id="name" value="world"></dd>
            </dl>
            <dl>
                <dt><label for="sex">性别</label></dt>
                <dd>
                    <select name="sex" id="sex">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="secret" selected>密</option>
                    </select>
                </dd>
            </dl>
            <dl>
                <dt><label for="age">年龄</label></dt>
                <dd><input type="text" name="age" id="age" value="18"></dd>
            </dl>
            <p><button type="button" id="add-item">增加记录</button></p>
        </form>

        <ul id="items">
            <li>
                <cite>ID： <span>0</span></cite>
                <em>姓名： <span>hello</span></em>
                <b>性别： <span>男</span></b>
                <i>年龄： <span>10</span></i>
                <time>添加时间： <span>-</span></time>
                <u><button class="del-item" data-id="0" disabled>删除</button></u>
            </li>
        </ul>
    </div>

    <script>
        const pd = {
            curID: 0
        }
        // $(document).ready(function () {
        $(function () {
            // 添加项目
            $("#add-item").click(function () {
                $.post('../backend/item-add.php', {
                    lastID: pd.curID,
                    name: $("#name").val(),
                    sex: $("#sex").val(),
                    age: $("#age").val(),
                }, function (res) {
                    const data = res.data;
                    $("#items").append(`
<li>
    <cite>ID： <span>${data.id}</span></cite>
    <em>姓名： <span>${data.name}</span></em>
    <b>性别： <span>${data.sex}</span></b>
    <i>年龄： <span>${data.age}</span></i>
    <time>添加时间： <span>${data.time}</span></time>
    <u><button class="del-item" data-id="${data.id}">删除</button></u>
</li>
                    ` );
                    pd.curID = data.id;
                })
            });
            // 删除项目, 新增元素， 需要使用时间委托机制
            $("ul").on('click', '.del-item', function () {
                const id = $(this).data("id");
                const $li = $(this).closest("li");
                $.post('../backend/item-del.php', {
                    id: id
                }, function (res) {
                    if (res.code == 0) {
                        $li.remove()
                    } else {
                        alert(res.msg)
                    }
                })
            })
        })

        $("ul")
    </script>
</body>

</html>